<?php
//session_start();

	require_once '/../Controleur/User_controleur.php';
        require_once("/../pdo/timeline.php"); 
        
	
	if(isset($_POST['logout'])) {
		$_SESSION = array(); 
		session_destroy();
		session_start();
	}
        

?>

<div class="header">
	<div id="content">
		<?php if (isset($_SESSION['username']) && !empty($_SESSION['username'])) { ?>

			<div class="btn-sign">
				
				<div class="connect">
					Connecté en tant que <button class="lien" onclick="page('User_vue')"><?php echo $_SESSION['username'] ?></button> - 
				</div>
				<div class="connect">
					<form method="post" action="#">
					  		<input type="hidden" name="logout" value="logout">	    	                
					        <button class="lien" type="submit">Se déconnecter</button>
				    </form>
				</div>
				<?php if($_SESSION['statut'] == 2 || $_SESSION['statut'] == 1) {?>
					<div class="connect">
						- <button class="lienG" onclick="page('Administrateur_vue')">Administration</button>
					</div>
				<?php } ?>

			</div>
		<?php } else {
                    if(!isset($_SESSION)){
                        $_SESSION["saison"]="1";
                        $_SESSION["episode"]="1";
                    }
                    
                ?>
			<div class="btn-sign">
				<a href="#login-box" class="login-window">Se connecter</a> /
				<a href="#inscription-box" class="inscription-window">S'inscrire</a>
		   	</div>
            
		<?php } ?>
	       
	    <div id="login-box" class="login-popup">
		    <a href="#" class="close"><img src="src/Vue/images/boutons/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
		    <form id="login" method="post" class="signin" action="#" >
		    	<h2>Connexion</h2>
		    	<hr/>
		    	<div id="resultat" class="resultat">
		        </div>
			    <fieldset class="textbox">

			        <label class="username">
			        	<span>Login</span>
			        	<input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Pseudo" required>
			        </label>
			               
			        <label class="password">
				        <span>Mot de passe</span>
				        <input id="password" name="password" value="" type="password" placeholder="Mot de passe" required>
			        </label>

			                
			        <button class="submit button" type="submit" id="submit" name="submit">Se connecter</button>
			                
			        <p>
			        	<button class="forgot" onclick="oubli()">Mot de passe oublié ?</button>
			        </p>

		        </fieldset>
		    </form>
		</div>

		<div id="inscription-box" class="inscription-popup">
		    <a href="#" class="close"><img src="src/Vue/images/boutons/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
		    <form id="inscription" method="post" class="signin" action="#">
		    	<h2>Inscription</h2>
		    	<hr />
		    	<div id="resultatInscr" class="resultat">
		        </div>
			    <fieldset class="textbox">

			        <label class="inscr_username">
			        	<span>Login</span>
			        	<input id="inscr_username" name="inscr_username" value="" type="text" autocomplete="on" placeholder="Pseudo" required>
			        </label>

			        <label class="inscr_mail">
			        	<span>E-mail</span>
			        	<input id="inscr_mail" name="inscr_mail" value="" type="text" autocomplete="on" placeholder="E-mail" required>
			        </label>
			               
			        <label class="inscr_password">
				        <span>Mot de passe</span>
				        <input id="inscr_password" name="inscr_password" value="" type="password" placeholder="Mot de passe" required>
			        </label>

			        <label class="inscr_password">
				        <span>Confirmation de mdp</span>
				        <input id="inscr_confPassword" name="inscr_confPassword" value="" type="password" placeholder="Confirmation de mdp" required>
			        </label>
			                
			        <button class="submit button" type="submit" id="inscr_submit" name="inscr_submit">Je m'inscris</button>

		        </fieldset>
		    </form>
		</div>

	</div>

    <div class="fondBanniere">
        <div id="timeZone">
            <p id="timelineMessage"></p>
            <div class="arrowBox"><div id="timeLeft"></div></div>
            <div id="timeline">
                <span id="saisonLabel">Saison <span id="nbSaison"></span></span>
                <?php if (isset($_SESSION['idUser']) && !empty($_SESSION['idUser'])) { ?>
                <span id="saveTimeline">
                    <span id="logoLock"></span>
                    <span id="saveTimelineText" >Sauvegarder</span>                        
                </span>
                <?php } ?>
                <span id="timelineSelect">
                    <label for="saison">Saison</label>                
                    <select name="saison" id="saison">
                        <?php
                        for ($i = 1; $i <= db_getNbSaison(); $i++) {
                            echo "<option value=$i>$i</option>";
                        }
                        ?>             
                    </select>
                    <label for="episode">Episode</label>
                    <select name="episode" id="episode">
                    </select>
                </span>
            </div>
            <div class="arrowBox"><div id="timeRight"></div></div>
        </div>
    </div>

	<ul class="boutonGroupe">
	  <li><button onclick="page('Carte_vue')" class="boutonCarte"/></li>
	  <li><button onclick="page('Episode_vue')" class="boutonEpisode"/></li>
	  <li><button onclick="page('Personnage_vue')" class="boutonPersonnage"/></li>
	  <li><button onclick="page('Vote_vue')" class="boutonProposition"/></li>
	  <li><button onclick="page('Forum_vue')" class="boutonForum"/></li>
	</ul>

	<div class="timeline"></div>

	<div id="resultat"></div>

</div>

<script>

	function page(nomPage) {

		var chemin = 'src/Vue/'+nomPage+'.php';
		$.ajaxSetup({async: false});
		$.post("src/Vue/session.php",{"chemin" : chemin});		
		$.ajaxSetup({async: true});
		$("#contenu").load('src/Vue/'+nomPage+'.php');
		if(nomPage == "User_vue" || nomPage == "Carte_vue") {
			location.reload();
		}
		//window.history.pushState(document.title,document.title,"/"+nomPage+".html");

	}

	function oubli() {

		$("#resultat").html("Dommage...");
		$(".login-popup").css("height","440px");

	}		

	function logout() {
    	window.location = logoutUrl;

	}

	$('#login').submit(function() {

			var rep = true;
			$.ajaxSetup({async: false});
			$.post("src/Vue/verif.php",
			{
				username : $("#username").val(),
				password : $("#password").val()
			},

			function(data){
				if(data.substring(data.length -1) == "N") {
					rep = false;
					$("#resultat").html("Login ou mot de passe incorrect");
					$(".login-popup").css("height","440px");
				}
				else if (data.substring(data.length -1) == "B") {
					rep = false;
					$("#resultat").html("Compte banni");
					$(".login-popup").css("height","440px");
				}

			});
			$.ajaxSetup({async: true});
			return rep;
	});

	$('#inscription').submit(function() {

			var rep = true;

			if($("#inscr_password").val() != $("#inscr_confPassword").val()) {
				$("#resultatInscr").html("Mot de passe différent de la confirmation de mot de passe");
				$(".inscription-popup").css("height","615px");
				rep = false;
			} else {
				$.ajaxSetup({async: false});
				$.post("src/Vue/verif.php",
				{
					inscr_username : $("#inscr_username").val(),
					inscr_password : $("#inscr_password").val(),
					inscr_mail : $("#inscr_mail").val()
				},

				function(data){
					if(data.substring(data.length -1) == "N") {
						rep = false;
						$("#resultatInscr").html("Login déjà utilisé");
						$(".inscription-popup").css("height","600px");
					} else if (data.substring(data.length -1) == "M") {
						rep = false;
						$("#resultatInscr").html("Mail déjà utilisé");
						$(".inscription-popup").css("height","600px");
					} else if (data.substring(data.length -1) == "B") {
						rep = false;
						$("#resultatInscr").html("Login et mail déjà utilisé");
						$(".inscription-popup").css("height","600px");
					} else {

					}

				});
				$.ajaxSetup({async: true});
			}

		
			return rep;
	});

	$(document).ready(function() {

		

		$('a.login-window').click(function() {

			var loginBox = $(this).attr('href');

			$(loginBox).fadeIn(300);
			
			var popMargTop = ($(loginBox).height() + 24) / 2; 
			var popMargLeft = ($(loginBox).width() + 24) / 2; 
			
			$(loginBox).css({ 
				'margin-top' : -popMargTop,
				'margin-left' : -popMargLeft
			});
			
			$('body').append('<div id="mask"></div>');
			$('#mask').fadeIn(300);
			
			return false;
		});
		
		$('a.close, #mask').click(function() { 
			$('#mask , .login-popup').fadeOut(300 , function() {
				$('#mask').remove();  
		  	}); 
			return false;
		});

		$('a.inscription-window').click(function() {
			
			var inscriptionBox = $(this).attr('href');

			$(inscriptionBox).fadeIn(300);
			
			var popMargTop = ($(inscriptionBox).height() + 24) / 2; 
			var popMargLeft = ($(inscriptionBox).width() + 24) / 2; 
			
			$(inscriptionBox).css({ 
				'margin-top' : -popMargTop,
				'margin-left' : -popMargLeft
			});
			
			$('body').append('<div id="mask"></div>');
			$('#mask').fadeIn(300);
			
			return false;
		});

		$('a.close, #mask').click(function() { 
			$('#mask , .inscription-popup').fadeOut(300 , function() {
				$('#mask').remove();  
		  	}); 
			return false;
		});
                
                
                var currentSaison = 1;
                var slider = $("#circles-slider");
                var currentEpisode=1;
                <?php if(isset($_SESSION["episode"])){?>
                currentEpisode = <?php echo $_SESSION["episode"]?>;
                currentSaison = <?php echo $_SESSION["saison"]?>;
//                loadNbEpisode(currentSaison);
                <?php }?>
                
                //Lien entre Slider et select Episode
                $("#episode").change(function () {
                    $("#circles-slider").slider("value", $(this).val());
                    changeEpisode($(this).val());
                });
                
//                $("#circles-slider").change(function () {
//                    $().slider("value", $(this).val());
//                    changeEpisode($(this).val());
//                });
                
//                changeSaison(currentSaison);
                loadTimeline(currentSaison, currentEpisode);
                //indicateur de saison en fonction de la saison
                $("#nbSaison").html($("#saison").val());
                //Changer de saison remet a l'episode 1, charge nb Episode
                $("#saison").change(function () {
                    var newSaison = $("#saison").val();
                    changeSaison(newSaison);
                });
                //utilisation des fleches pour changer de saison
                $("#timeLeft").on("click", function(){
                    var newSaison = parseInt($("#saison").val())-1;
                    changeSaison(newSaison);
                });
                $("#timeRight").on("click", function(){
                    var newSaison = parseInt($("#saison").val())+1;
                    changeSaison(newSaison);
                });
                
                //Affichage de la sauvegarde
                $("#saveTimeline").on("mouseover", function () {
                    $("#saveTimelineText").css("visibility", "visible");
                });
                $("#saveTimeline").on("mouseout", function () {
                    $("#saveTimelineText").css("visibility", "hidden");
                });
                
                //sauvegarde timeline courante
                $("#saveTimeline").on("click", function () {
                    saveTimeline($("#saison").val(), $("#episode").val());
                });

	});

</script>